$(function () {
  // 点击a链接.切换显示
  $("#loginBox a").on("click", function () {
    $("#loginBox").hide();
    $("#regBox").show();
  });
  $("#regBox a").on("click", function () {
    $("#regBox").hide();
    $("#loginBox").show();
  });

  //自定义校验规则
  let form = layui.form;
  //form.verify()可以自定义校验规则
  //规则的参数是对象,里面的属性做规则名称,值是具有
  form.verify({
    //属性做规则名称,值是具体的规则
    //值有两类:函数和数组
    username: [
      //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
      /^[\w\S]{6,10}$/,
      "用户名必须是6-10位汉字或数字或字母,允许下划线但不能出现空格",
    ],
    password: [
      /^[a-zA-z0-9\S]{6,16}$/,
      "密码必须是6-16位数字或字母,且不能出现空格",
    ],
    repassword: function (value, item) {
      //value代指确认密码的值
      //获取密码input的值
      //判断 两个值,不相等就报错
      let pwd = $("#regBox input[name=password]").val();
      if (pwd !== value) {
        return "两次密码输入不一致!";
      }
    },
  });

  // 注册功能
  let layer = layui.layer;
  $("#formReg").on("submit", function (e) {
    //阻止表单默认提交
    e.preventDefault();
    //axios发送ajax
    axios({
      url: "/api/reguser",
      method: "post",
      //大事件的后端,只支持 application/x-www-form-urlencoded
      //只支持 a=1&b=2&c=3
      data: $(this).serialize(),
    }).then((res) => {
      // 成功回调
      console.log(res.data);
      // 判断返回数据是否正确
      if (res.data.status != 0) {
        // return alert(res.data.message)
        return layer.msg(res.data.message);
      }
      // 成功后,提示:
      layer.msg("注册用户成功!");
      // 切换到登录模块
      $("#regBox a").click();
      // 清空表单 - dom元素中,有一个reset()可以重置表单
      $("#formReg")[0].reset();
    });
  });

  // 登录功能
  $("#formLogin").on("submit", function (e) {
    // 阻止表单默认提交
    e.preventDefault();
    // axios发送ajax
    axios({
      url: "/api/login",
      method: "post",
      data: $(this).serialize(),
    }).then(({ data: res }) => {
      //成功回调
      console.log(res.status);
      // 判断业务状态码
      if (res.status !== 0) {
        return layer.msg(res.message);
      }
      // 成功:提示,存储token
      layer.msg("登录成功!");
      localStorage.setItem("token", res.token);
      location.href = "/index.html";
    });
  });
});
